<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_商品列表练习</title>
</head>
<body>
<table border="1">
    <tr>
        <td>商品名称</td>
        <td>商品价格</td>
        <td>商品数量</td>
    </tr>
</table>
<script>
    const arr=[
        {title:"红米手机",price:3598,num:100},
        {title:"华为手机",price:7699,num:200},
        {title:"小米手机",price:5699,num:600},
        {title:"苹果手机",price:12899,num:1800}
    ]
    //获取表格
    let table=document.querySelector("table");
    //创建表格的元素
    for (let i = 0; i < arr.length; i++) {
        let tr=document.createElement("tr");
        let td1=document.createElement("td");
        let td2=document.createElement("td");
        let td3=document.createElement("td");
        //添加内容
        td1.innerHTML=arr[i].title;
        td2.innerHTML=arr[i].price;
        td3.innerHTML=arr[i].num;
        //添加到tr
        tr.append(td1,td2,td3);
        //添加到table
        table.append(tr);
    }
</script>
</body>
</html>